<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>百度网盘</title>
</head>

<body>
    <div id="app">
        <div class="head">
            <div class="logo">
                <img width="100%" src="./images/logo.png" alt="">
            </div>
            <div class="avtar">
                <img src="./images/svip.png" alt="">
            </div>
        </div>
        <div class="container">
            <div class="nav">
                <div class="nav-item active">
                    <img src="./images/icon1.png" alt="">
                    首页
                </div>
                <div class="nav-item">
                    <img src="./images/icon2.png" alt="">
                    收发
                </div>
                <div class="nav-item">
                    <img src="./images/icon3.png" alt="">
                    同步
                </div>
                <div class="nav-item">
                    <img src="./images/icon4.png" alt="">
                    消息
                </div>
                <div class="nav-item">
                    <img src="./images/icon5.png" alt="">
                    相册
                </div>
                <div class="nav-item">
                    <img src="./images/icon6.png" alt="">
                    笔记
                </div>
                <div class="nav-item">
                    <img src="./images/icon7.png" alt="">
                    工具
                </div>
            </div>
            <div class="content">
                <div class="btn-wrap">
                    <button class="btn primary">上传文件</button>
                    <button class="btn light">新建文件夹</button>
                    <button class="btn danger">批量删除</button>
                </div>
                <div class="file-title">
                    全部文件
                </div>
                <div class="file-card">
                    <div class="file-head">
                        <!-- 全选 -->
                        <div>
                            <input type="checkbox" v-model="selectAll">
                        </div>
                        <div>文件名</div>
                        <div>修改时间</div>
                        <div>大小</div>
                        <div>操作</div>
                    </div>
                    <div class="file-list-wrap">
                        <table class="file-list">
                            <tbody>
                                <tr v-for="item in fileList">
                                    <!-- 勾选框 -->
                                    <td>
                                        <input type="checkbox" v-model="item.select">
                                    </td>
                                    <td>
                                        <span class="file-icon" :class="item.isFile?'file':'folder'"></span>
                                        {{item.name}}
                                    </td>
                                    <td>{{item.updateTime}}</td>
                                    <td>{{item.size}}</td>
                                    <td>
                                        <button>删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        // TODO：阅读代码，根据提供的数据，实现目标效果
        // DATA字段说明
        /**
         *  fileList 文件列表
         *  name 文件名称
         *  updateTime 修改时间
         *  size 大小
         *  id 文件id
         *  isFile 是否文件,true代表文件,false代表文件夹
         *  select 勾选状态,true代表勾选,false代表未勾选
        */
        const app = new Vue({
            el: '#app',
            data: {
                fileList: [
                    {
                        name: '01-PPT',
                        updateTime: '2023-11-11 11:11',
                        size: '-',
                        id: 1697420179352,
                        isFile: false,
                        select:false
                    },
                    {
                        name: '02-CODE',
                        updateTime: '2023-11-11 11:11',
                        size: '-',
                        id: 1697420179353,
                        isFile: false,
                        select:false
                    },
                    {
                        name: '03-笔记',
                        updateTime: '2023-11-11 11:11',
                        size: '-',
                        id: 1697420179354,
                        isFile: false,
                        select:false
                    },
                    {
                        name: '04-作业',
                        updateTime: '2023-11-11 11:11',
                        size: '-',
                        id: 1697420179355,
                        isFile: false,
                        select:false
                    },
                    {
                        name: 'README.md',
                        updateTime: '2023-11-11 11:11',
                        size: '147.2KB',
                        id: 1697420179356,
                        isFile: true,
                        select:false
                    },
                    {
                        name: 'day01.xmind',
                        updateTime: '2023-11-11 11:11',
                        size: '155.3KB',
                        id: 1697420179357,
                        isFile: true,
                        select:false
                    }
                ],
            },
            computed:{
                selectAll:{
                    get(){
                        return this.fileList.every(item=>item.select)
                    },
                    set(value){
                        this.fileList.forEach(item=>item.select=value)
                    }
                }
            }
        })
    </script>
</body>

</html>